<template>
  <div class="index-box" ref="index">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div class="search" ref="search">
          <el-form :inline="true" :model="searchForm" size="small" ref="searchForm" @submit.native.prevent class="demo-form-inline" id="searchBox">

            <el-form-item prop="activityName">
                <el-input v-model="searchForm.activityName" clearable placeholder="活动名称"></el-input>
            </el-form-item>
            <el-form-item prop="time">
              <el-date-picker v-model="time" type="daterange" align="right" unlink-panels range-separator="至"
                start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                :picker-options="pickerOptions">
              </el-date-picker>
            </el-form-item>
            <el-form-item class="clearfix">
              <el-button type="primary" @click="handleSearch()" icon="el-icon-search">搜索</el-button>
              <el-button icon="el-icon-refresh" size="small" @click="resetSearch">重置</el-button>
               <el-button type="primary" @click="handleGoAddActivity()" size="small" icon="el-icon-plus">创建活动</el-button>
            </el-form-item>
          </el-form>
        </div>

        <div class="table" ref="table">
          <el-table :data="dataList" style="width: 100%;"  border :height="tableHeight"  stripe v-loading="loading">
            <el-table-column prop="activityCode" label="活动编号" width="160" align="center"></el-table-column>
            <el-table-column prop="activityName" label="活动名称"  align="center"></el-table-column>
            <el-table-column prop="nickname" label="日期"  align="center">
              <template #default="scope">
                  <span>{{ (parseTime(scope.row.activityStartTime)).substring(0,10) }} 至 {{ (parseTime(scope.row.activityEndTime)).substring(0,10) }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="图片"  width="80" align="center">
              <template #default="scope">
                 <el-image :src="scope.row.activityImage" fit="fill" v-image-preview="scope.row.activityImage" class="img"></el-image>
              </template>
            </el-table-column>

          <!-- <el-table-column prop="fullname" label="排序"  align="center"></el-table-column> -->
            <el-table-column label="状态"  align="center">
              <template #default="scope">
                <div class="d-flex justify-center">
                  <MySwitch :value.sync="scope.row.activityStatus" :id="scope.row.activityStatus" text="启用|禁用" textValue="1|2" @changeStatus="handleChangeStatus(scope.row)" ></MySwitch>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="操作"  width="150"  align="center" fixed="right">
              <template #default="scope">
                <div class="verticalBtn">
                 <el-button
                    size="medium"
                    type="text"
                    icon="el-icon-edit-outline"
                    @click="handleEdit(scope.row)"
                  >修改</el-button>
                 <!-- <el-button
                    size="medium"
                    type="text"
                    icon="el-icon-delete-solid"
                    @click="handleDelt(scope.row)"
                  >删除</el-button> -->
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="page" ref="page">
           <MyPagination
              v-show="total"
             :total="total"
             :page.sync="searchForm.pageNum"
             :limit.sync="searchForm.pageSize"
             @pagination="dataInfo"
           />
        </div>
      </el-col>
    </el-row>


  </div>
</template>

<script>
  import common from '@/api/api';
  import {
    BgetActivityGoodsList,BactivityGoodsenableOrDisable
  } from '@/api/getData'
  import option from '../../common/option.js';

  export default {
    data() {

      return {
        loading: false,
        btnLoading: false,
        time:[],
        searchForm: {
          activityName:'',
          pageNum: 1,
          pageSize: 20,
        },
        total: 0,
        tableHeight:0,//table 高度

        dataList:[],

        multipleSelection: '',
        dialogTitle: '',
        statusRow:{},/*活跃的列*/
      }
    },
    computed: {
      pickerOptions: () => {
        return option.pickerOptions;
      }
    },
    mounted() {
      this.dataInfo();
      //this.getSelect();
      this.$nextTick(() => {
          this.tableHeight = this.$refs.index.offsetHeight - this.$refs.search.offsetHeight  - this.$refs.page.offsetHeight - 55;
      })
    },
    methods: {
      async handleChangeStatus(row) {
        try {
          console.log(row)
          let data = {
            activityId: row.activityId,
            activityStatus: row.activityStatus
          }
          const result = await BactivityGoodsenableOrDisable(data);
          if (result.code == 200) {
            this.$message.success(result.msg);
          } else {
            this.$message.error(result.msg);
            row.activityStatus = !row.activityStatus;
          }
        } catch (err) {
          console.log(err)
        }
      },
      resetSearch(){
        this.time = [];
        this.resetForm('searchForm');
        this.dataInfo();
      },
      handleEdit(row){
        this.$router.push({path:'/activity/addActivity?id='+row.activityId});
      },

      /** 数据初始化请求动态列表数据 **/
      getSelect(){
        getAllMemberLevel().then(res=>{
          let list = res.data;
          list.map(item=>{
            item.nameMoney = item.levelId!='1'?item.name+"("+item.unionFee+"万元加盟金)":item.name
          })
          this.levelList = list;
        })
        getTagList({typeId: 2}).then(res=>{ this.tagList = res.rows; })//用户标签
      },
      async dataInfo() {
        try {
          let data = this.addDateRange(this.searchForm, this.time, 'activityStartTime', 'activityEndTime');
          this.loading = true;
          const result = await BgetActivityGoodsList(data);
          if (result.code == 200) {
            this.total = result.total;
            this.dataList = result.rows;
          } else {
            this.$message.error(result.msg);
          }
          this.loading = false;
        } catch (err) {
          this.loading = false;
          console.log(err)
        }
      },

      handleSearch() {
        this.searchForm.pageNum= 1;
        this.dataInfo();
      },
      /** 删除当前列 **/
      handleDelt(row){
          this.$confirm('您确定要删除吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            customerDelete({customerId:row.customerId}).then((result) => {
              if (result.code == '200') {
                   this.dataInfo();
                   this.$message({
                     message: result.msg,
                     type: 'success'
                   });
               }else{
                  this.$message.error(result.msg);
               }
           });
          }).catch((err) => {
              console.log(err);
          });
      },
      handleGoAddActivity(){
         this.$router.push({path:'/activity/addActivity'});
      },
    }
  }
</script>

<style scoped lang="scss">

  .title{
    text-align: center;
    margin:5px 0;
  }
  .el-table .el-dropdown-link{
      cursor: pointer;
      color: #61997A;
      margin-left: 5px;
  }
    .leftDialog{
      height:540px;
      overflow-y: auto;
    }
    .activeVerticalBox .activeItem{
      color:#61997A;
      cursor: pointer;
      margin: 0px;
      text-align: center;
      height:20px;
      line-height: 20px;
    }
    .activeVerticalBox .el-dropdown{
      display: flex;
      justify-content: center;
      color:#61997A;
      cursor: pointer;
    }
    .activeCheckedBox{
      border-top: 1px solid #ddd;
      padding:10px;
      height:52px;
      .el-tag{
        margin-right:10px;
      }
    }

</style>
